import 'package:flutter/material.dart';

// 按钮控件
class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮'),
        backgroundColor: Colors.blueAccent,
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            // 漂浮按钮: 默认带有阴影和灰色背景, 按下后, 阴影会变大
            ElevatedButton(
              child: Text('Normal'),
              onPressed: () {},
            ),
            // 扁平按钮: 默认背景透明并不带阴影, 按下后, 会有背景色
            TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith((status) {
                  if (status.contains(MaterialState.pressed)) {
                    return Colors.grey;
                  }
                  return Colors.white;
                }),
              ),
              child: Text(
                'Normal',
                style: TextStyle(color: Colors.black),
              ),
              onPressed: () {},
            ),
            // 默认有一个边框, 不带阴影且背景透明
            OutlinedButton(
              child: Text(
                'Normal',
                style: TextStyle(color: Colors.blue),
              ),
              // borderSide: BorderSide(color: Colors.grey),
              style: ButtonStyle(
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.grey, width: 1)),
              ),
              onPressed: () {},
            ),
            // 一个可点击Icon, 不包括文字, 默认没有背景, 点击会出现背景
            IconButton(
              icon: Icon(
                Icons.thumb_up,
                color: Colors.black,
              ),
              onPressed: () {},
            ),

            // 带图标的按钮
            ElevatedButton.icon(
              icon: Icon(Icons.send),
              label: Text('发送'),
              onPressed: () {},
            ),
            TextButton.icon(
              icon: Icon(
                Icons.add,
                color: Colors.black,
              ),
              label: Text('添加'),
              style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all(Colors.black)),
              onPressed: () {},
            ),
            OutlinedButton.icon(
              icon: Icon(Icons.info),
              label: Text('详情'),
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all(Colors.black),
                side: MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.pressed)) {
                    return BorderSide(color: Colors.blue, width: 1);
                  }
                  return BorderSide(color: Colors.grey, width: 1);
                }),
              ),
              onPressed: () {},
            ),

            // 自定义按钮外观
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextButton(
                  clipBehavior: Clip.antiAlias,
                  style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.resolveWith((states) {
                      if (states.contains(MaterialState.pressed)) {
                        return Colors.blue[700];
                      }
                      return Colors.blue;
                    }),
                    overlayColor: MaterialStateProperty.all(Colors.grey),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0)),
                    ),
                  ),
                  child: Text('提交',
                      style: TextStyle(color: Colors.white)), // 按钮的内容
                  onPressed: () {},
                ),
                ElevatedButton(
                  child: Text('确定'),
                  style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all(Colors.white),
                      backgroundColor:
                          MaterialStateProperty.resolveWith((states) {
                        if (states.contains(MaterialState.pressed)) {
                          return Colors.blue[700];
                        }
                        return Colors.blue;
                      }),
                      overlayColor: MaterialStateProperty.all(Colors.grey),
                      elevation: MaterialStateProperty.all(20.0)
                      // shape: MaterialStateProperty.all(BorderRadius.circular(20.0)),
                      ),
                  onPressed: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
